<template>
	<div style="width: 100%; height: 100%">
		<Menu></Menu>
		<div class="table-admin-container list" style="margin-top: 2px; height: calc(100% - 50px); display: flex; padding: 10px; margin-bottom: 80px">
			<el-row :gutter="20">
				<el-col :span="4">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">产业链</div>
							</div>
						</template>
						<List @changeChain="changeChain"></List>
					</el-card>
				</el-col>
				<el-col :span="14">
					<el-row :gutter="10">
						<el-col :span="24">
							<el-card>
								<template #header>
									<div class="card-header">
										<div class="icon"><el-image src="/src/assets/chain.png" /></div>
										<div class="title">{{ chain_name_big }}现状分析图</div>
									</div>
								</template>
								<ChainTp ref="chainTpRef" @changeChild="changeChild"></ChainTp>
							</el-card>
						</el-col>
						<el-col :span="12">
							<el-card>
								<template #header>
									<div class="card-header">
										<div class="icon"><el-image src="/src/assets/chain.png" /></div>
										<div class="title">注册企业</div>
									</div>
								</template>
								<div style="width: 100%; height: 250px" ref="registerRef"></div>
							</el-card>
						</el-col>
						<el-col :span="12">
							<el-card>
								<template #header>
									<div class="card-header">
										<div class="icon"><el-image src="/src/assets/chain.png" /></div>
										<div class="title">上市公司业绩</div>
									</div>
								</template>
								<div style="width: 100%; height: 250px" ref="listRef"></div>
							</el-card>
						</el-col>
						<el-col :span="12" style="margin-top: 10px">
							<el-card>
								<template #header>
									<div class="card-header">
										<div class="icon"><el-image src="/src/assets/chain.png" /></div>
										<div class="title">投资事件</div>
									</div>
								</template>
								<div style="width: 100%; height: 250px" ref="investRef"></div>
							</el-card>
						</el-col>
						<el-col :span="12" style="margin-top: 10px">
							<el-card>
								<template #header>
									<div class="card-header">
										<div class="icon"><el-image src="/src/assets/chain.png" /></div>
										<div class="title">融资事件</div>
									</div>
								</template>
								<div style="width: 100%; height: 250px" ref="financingRef"></div>
							</el-card>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="6">
					<el-card>
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">分析</div>
							</div>
						</template>
						<div style="height: 240px">
							<div style="height: 80px; padding: 5px 0">
								<div
									style="
										width: 70px;
										height: 70px;
										background-color: black;
										line-height: 70px;
										text-align: center;
										color: #fff;
										font-size: 26px;
										float: left;
									"
								>
									强
								</div>
								<div style="padding: 15px 5px; float: right; width: 325px">
									光伏组件 ,人工复合材料 ,光伏电池 ,传感器 ,智能环保装备 , 虚拟化 ,钢材 ,有色金属 ,电容电感电阻
								</div>
							</div>
							<div style="height: 80px; padding: 5px 0">
								<div
									style="
										width: 70px;
										height: 70px;
										background-color: black;
										line-height: 70px;
										text-align: center;
										color: #fff;
										font-size: 26px;
										float: left;
									"
								>
									延
								</div>
								<div style="padding: 15px 5px; float: right; width: 325px">
									光伏组件 ,人工复合材料 ,光伏电池 ,传感器 ,智能环保装备 , 虚拟化 ,钢材 ,有色金属 ,电容电感电阻
								</div>
							</div>
							<div style="height: 80px; padding: 5px 0">
								<div
									style="
										width: 70px;
										height: 70px;
										background-color: black;
										line-height: 70px;
										text-align: center;
										color: #fff;
										font-size: 26px;
										float: left;
									"
								>
									补
								</div>
								<div style="padding: 15px 5px; float: right; width: 325px">
									光伏组件 ,人工复合材料 ,光伏电池 ,传感器 ,智能环保装备 , 虚拟化 ,钢材 ,有色金属 ,电容电感电阻
								</div>
							</div>
						</div>
					</el-card>
					<el-card style="height: calc(100% - 355px)">
						<template #header>
							<div class="card-header">
								<div class="icon"><el-image src="/src/assets/chain.png" /></div>
								<div class="title">本地企业名单</div>
								<div class="remind">150</div>
								<div class="more"></div>
							</div>
						</template>
						<Company ref="CompanyRef"></Company>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<!-- <div  class="table-admin-container  layout-padding"  style="width: 400px; float: left; height: 96%;  top: 50px; ">-->
	</div>
</template>

<script setup lang="ts" name="cgjudgeLists">
import { defineAsyncComponent, reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getList, del, batDel } from '/@/api/cgjudge/index';
import { useRoute } from 'vue-router';
import * as echarts from 'echarts';

// 引入组件
const List = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/List.vue'));
const Company = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/company.vue'));
const Menu = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/menu.vue'));
const ChainTp = defineAsyncComponent(() => import('/@/views/cogen/cgjudge/chainTp.vue'));

// 定义变量内容
let CompanyRef = ref(null);
let listRef = ref(null);
let chainTpRef = ref(null);
let registerRef = ref(null);
let investRef = ref(null);
let financingRef = ref(null);
let chain_name_big = ref();
let chain_name = ref();

const changeChain = (data) => {
	if (!data.pid) {
		chain_name_big.value = data.chain_name;
		chainTpRef.value.changeChain(data);
	} 
	chain_name.value = data.chain_name;
	CompanyRef.value.init({ chain_id: data.id });
};
const changeChild = (data) => {
	CompanyRef.value.init({ chain_id: data.id });
};

// 页面加载时
onMounted(() => {
	// 关联查询
	const listChart = echarts.init(listRef.value);
	const listOption = {
		dataset: {
			source: [
				['数据1', 2],
				['数据2', 2],
				['数据3', 5],
				['数据4', 2],
				['数据5', 2],
				['数据6', 2],
				['数据7', 2],
				['数据8', 2],
			],
		},
		backgroundColor: '#fff',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
			},
		},
		grid: {
			left: '8%',
			right: '4%',
			bottom: '15%',
			top: '15%',
		},
		xAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#dddddd',
				},
			},
			axisTick: {
				show: false,
				alignWithLabel: true,
				lineStyle: {
					color: '#f3f3f3',
				},
			},
			axisLabel: {
				fontSize: 14,
				textStyle: {
					color: '#666666',
					fontFamily: 'Microsoft YaHei',
				},
			},
		},

		yAxis: {
			type: 'value',
			min: 0,
			max: 5,
			axisLine: {
				show: false,
				lineStyle: {
					color: '#dddddd',
				},
			},
			data: [1, 2, 3],
			axisTick: {
				show: true,
				alignWithLabel: true,
				lineStyle: {
					color: '#dddddd',
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: '#dddddd',
					type: [6, 3],
					dashOffset: 2,
				},
			},
			axisLabel: {
				padding: [0, 5, 0, 0],
				fontSize: 14,
				textStyle: {
					color: '#666666',
					fontFamily: 'Microsoft YaHei',
				},
			},
		},
		series: [
			{
				type: 'bar',
				barWidth: 10,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#3397f5',
							},
							{
								offset: 1,
								color: '#138AF2',
							},
						]),
						barBorderRadius: [4, 4, 0, 0],
					},
				},
			},
		],
	};
	listChart.setOption(listOption);
	const registerChart = echarts.init(registerRef.value);
	const registerOption = {
		dataset: {
			source: [
				['数据1', 2],
				['数据2', 2],
				['数据3', 5],
				['数据4', 2],
				['数据5', 2],
				['数据6', 2],
				['数据7', 2],
				['数据8', 2],
			],
		},
		backgroundColor: '#fff',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				// 坐标轴指示器，坐标轴触发有效
				type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
			},
		},
		grid: {
			left: '8%',
			right: '4%',
			bottom: '15%',
			top: '15%',
		},
		xAxis: {
			type: 'category',
			axisLine: {
				lineStyle: {
					color: '#dddddd',
				},
			},
			axisTick: {
				show: false,
				alignWithLabel: true,
				lineStyle: {
					color: '#f3f3f3',
				},
			},
			axisLabel: {
				fontSize: 14,
				textStyle: {
					color: '#666666',
					fontFamily: 'Microsoft YaHei',
				},
			},
		},

		yAxis: {
			type: 'value',
			min: 0,
			max: 5,
			axisLine: {
				show: false,
				lineStyle: {
					color: '#dddddd',
				},
			},
			data: [1, 2, 3],
			axisTick: {
				show: true,
				alignWithLabel: true,
				lineStyle: {
					color: '#dddddd',
				},
			},
			splitLine: {
				show: true,
				lineStyle: {
					type: 'dotted',
					color: '#dddddd',
					type: [6, 3],
					dashOffset: 2,
				},
			},
			axisLabel: {
				padding: [0, 5, 0, 0],
				fontSize: 14,
				textStyle: {
					color: '#666666',
					fontFamily: 'Microsoft YaHei',
				},
			},
		},
		series: [
			{
				type: 'bar',
				barWidth: 10,
				itemStyle: {
					normal: {
						color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
							{
								offset: 0,
								color: '#3397f5',
							},
							{
								offset: 1,
								color: '#138AF2',
							},
						]),
						barBorderRadius: [4, 4, 0, 0],
					},
				},
			},
		],
	};
	registerChart.setOption(registerOption);
	var colorList = ['#4450BB', '#5F6CE6', '#58C9F7', '#F74D4E', '#FAC231'];
	var title = ['子企业1', '子企业2', '子企业3', '子企业4', '子企业5'];
	var dataValue = ['13.43', '33.08', '35.67', '11.5', '28.84'];
	var dataList = title.map((item, index) => {
		return {
			name: item,
			value: dataValue[index],
		};
	});
	var center = ['50%', '50%'];
	var option = {
		color: colorList,
		series: [
			// 外边设置
			{
				type: 'pie',
				center: center,
				radius: ['55%', '65%'],
				itemStyle: {
					color: '#F6F7F9',
				},
				label: {
					show: true,
				},
				data: [0],
			},
			// 展示层
			{
				type: 'pie',
				center: center,
				radius: ['25%', '60%'],
				itemStyle: {
					borderWidth: 1, //描边线宽
					borderColor: '#fff',
				},
				label: {
					show: true,
					position: 'outside',
					alignTo: 'labelLine',
					backgroundColor: '#fff',
					height: 0,
					width: 0,
					lineHeight: 0,
					distanceToLabelLine: 0,
					borderRadius: 3,
					borderWidth: 1,
					borderColor: 'auto',
					padding: [3, -3, 3, -3],
					formatter: function (params) {
						return `{b|${params.value}%}\n{a|${params.name}}`;
					},
					rich: {
						a: {
							padding: [20, -80, 40, -80],
							fontSize: '12px',
							fontFamily: 'MicrosoftYaHei',
							color: '#091158',
						},
						b: {
							padding: [0, -80, 55, -80],
							fontSize: '15px',
							fontFamily: 'MicrosoftYaHei-Bold, MicrosoftYaHei',
							fontWeight: 'bold',
							color: '#001F3D',
						},
					},
				},
				labelLine: {
					show: false,
					normal: {
						length: 40,
						length2: 85,
						align: 'right',
						lineStyle: {
							width: 1,
						},
					},
				},
				data: dataList,
			},
		],
	};
	const investChart = echarts.init(investRef.value);
	investChart.setOption(option);
	const financingChart = echarts.init(financingRef.value);
	financingChart.setOption(option);
});
</script>

<style scoped lang="scss">
.chain {
	width: 100%;
	height: 100%;
	padding: 10px;
	.section-level {
		width: 5%;
		height: auto;
		font-size: 18px;
		float: left;
		color: #fff;
		display: flex;
		align-items: center;
		text-align: center;
		border-radius: 6px 0px 0px 6px;
	}
	.title {
		color: #ffffff;
		padding: 10px;
		text-align: center;
		font-size: 16px;
		border-radius: 6px 6px 0px 0px;
	}
	.level_one {
		width: 49%;
		margin-top: 10px;
		margin-right: 1%;
		color: #fff;
		float: left;
		border: 0.0625rem dashed #0066cb;
		border-radius: 6px 6px 0px 0px;
		.level_two {
			margin-top: 10px;
			float: left;
			text-align: center;
			padding: 10px;
			border-radius: 6px;
		}
		.level_two:nth-child(2n + 1) {
			float: right;
		}
		.w100 {
			width: 100%;
		}
		.w50 {
			width: 49%;
		}
	}
	.blue {
		background-color: #1890ff;
	}
	.orange {
		background-color: orangered;
	}
	.grey {
		background-color: gray;
	}
	.light-blue {
		background-color: rgb(99, 193, 224);
	}
	.section-level-upstream {
		border: 0.0625rem dashed #0066cb;
		width: 40%;
		float: left;
		padding: 5px;
	}
	.section-level-midstream {
		width: 35%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
	}
	.section-level-downstream {
		width: 20%;
		float: left;
		padding: 5px;
		border: 0.0625rem dashed #0066cb;
		border-radius: 0px 6px 0px 0px;
	}
}
.card-header {
	height: 35px;
	.icon {
		float: left;
		margin-right: 15px;
	}
	.title {
		font-size: 22px;
		color: #010101;
		float: left;
	}
	.remind {
		height: 16px;
		background: #ff0000;
		border-radius: 6px 6px 6px 0px;
		float: left;
		color: #ffff;
		margin-left: 10px;
		text-align: center;
		padding: 0px 5px;
		font-size: 12px;
	}
	.more {
		background-image: url('/src/assets/more.png');
		width: 16px;
		height: 14px;
		float: right;
		margin-top: 10px;
		background-size: 100% 100%;
	}
}
.menu {
	width: 100%;
	height: 50px;
	background-color: #ffffff;
	li {
		list-style: none;
		float: left;
		width: 5.8%;
		font-size: 14px;
		line-height: 38px;
		text-align: center;
		padding-bottom: 7px;
		.el-link {
			color: #000000 !important;
		}
		.el-link:hover {
			font-size: 16px;
			color: #1890ff !important;
			border-bottom: #1890ff 3px solid;
			border-radius: 1px 2px 2px 1px;
		}
		.active {
			font-size: 16px;
			color: #1890ff !important;
			border-bottom: #1890ff 3px solid;
			border-radius: 1px 2px 2px 1px;
		}
	}
}
.table-admin-container {
	.table-admin-padding {
		padding: 15px;
		.table-admin {
			flex: 1;
			overflow: hidden;
		}
	}
}
.content {
	min-height: 235px;
	li:hover {
		background-color: rgba(24, 144, 255, 0.1);
	}
	li {
		list-style: none;
		height: auto;
		line-height: 30px;
		padding: 10px 0px 10px 20px;
		.list {
			height: 30px;
			.drop-new {
				background-color: #efa151;
				float: left;
				width: 8px;
				height: 8px;
				border-radius: 3px;
				margin-top: 11px;
			}
			.topic {
				height: 22px;
				background: linear-gradient(140deg, #ff3334, #fe7527);
				border-radius: 0px 6px 0px 6px;
				float: left;
				color: #fff;
				text-align: center;
				line-height: 22px;
				font-size: 14px;
				margin-left: 15px;
				padding: 0 8px;
				margin-top: 4px;
			}
			.title {
				height: 17px;
				font-weight: 400;
				font-size: 16px;
				color: #000000;
				float: left;
				margin-left: 10px;
			}
			.time {
				color: #999999;
			}
		}
		.description {
			height: 20px;
			color: #999999;
			margin-left: 10px;
			.address {
				float: left;
				margin-left: 10px;
			}
			.line {
				float: left;
				margin-left: 10px;
			}
			.time {
				float: left;
				margin-left: 10px;
			}
		}
	}
}
.el-card {
	margin-bottom: 5px;
}
</style>
